<template>
	<div class="alphabetical">
		<div class="alphabeticalOrder">字母排序</div>
		<ul class="character">
			<li class="characterLi"  @click="handleLetterChange" v-for='(item,index) of list' :key="index">{{item}}</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Alphabetical',
		props:{
			list:Array
		},
		methods:{
			handleLetterChange(e){
				this.$emit('change',e.target.innerText);
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.alphabeticalOrder
		fobt-size:0.4rem
		padding:0.3rem
	.character
		position:relative
		overflow:hidden
		background:#fff
		padding:0.3rem 0
		z-index:2
		.characterLi
			width:16.6%
			float:left
			text-align:center
			height:0.9rem
			line-height:0.9rem
</style>